<template>
  <el-container style="text-align: right; font-size: 12px">
    <el-backtop :bottom="60"></el-backtop>
    <!--********** 头部 -->
    <el-header style="height:auto;padding:0">
      <e-header></e-header>
      <e-contentFrame> </e-contentFrame>
      <e-contentTag> </e-contentTag>
      <!-- 广告位 -->
      <div class="new-advlocation">
        <e-advertisingSpace> </e-advertisingSpace>
      </div>
    </el-header>
    <!--********** 主体 -->
    <el-main style="height:auto">
      <!-- <div
        class="mo_login"
        v-loading="loading"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="#ffffff"
      > -->
      <div class="mo_login">
        <div class="login-left">
          <div class="left-img">
            <el-image
              class="img-size"
              :src="userceneter"
              fit="cover"
            ></el-image>
          </div>
          <div class="left-name">
            LINUX
          </div>
          <div class="left-list">
            <div class="list-bottom">
              <el-radio-group
                class="addlist"
                v-model="tabPosition"
                :class="item.id == tabPosition ? 'add_color' : ''"
                v-for="(item, index) in items"
                :key="index"
                @change="showRight(item.id)"
              >
                <i class="addwidth" :class="item.src"></i>
                <el-radio-button class="addbutton" :label="item.id">{{
                  item.name
                }}</el-radio-button>
              </el-radio-group>
            </div>
          </div>
        </div>
        <div class="login-middle"></div>

        <div class="login-right">
          <div class="right-publish" v-show="userStaus1">
            <div class="text_title">
              <p>发布信息</p>
              <p class="title-yin">Release information</p>
              <div class="title-line"></div>
            </div>
            <div class="right-list">
              <div
                class="two-body"
                v-for="(item, index) in Recommend"
                :key="index"
                @click="ToMessageDetails(1, 2)"
              >
                <div class="two-content">
                  <div class="content_img_2">
                    <el-image
                      class="img_size"
                      :src="imgurl + item.content_imgs"
                      fit="fill"
                    ></el-image>
                  </div>
                  <div class="content_text">
                    <div class="content_title textOut">
                      {{ item.content_title }}
                    </div>
                    <div class="content_bridf text_more_Line">
                      {{ item.content_bridf }}
                    </div>
                    <div class="content_data ">
                      <div>{{ item.content_date }}</div>
                      <div>
                        <span>{{ item.company_name }}</span
                        ><span>{{ item.content_position }}</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="right-total">
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-size="6"
                layout="total,  prev,pager,  next, jumper"
                :total="addTotal"
              >
              </el-pagination>
            </div>
          </div>
          <div class="right-attention" v-show="userStaus2">
            <div class="text_title">
              <p>我的关注</p>
              <p class="title-yin">My releases</p>
              <div class="title-line"></div>
            </div>
            <div class="right-list">
              <div class="two-body" @click="ToMessageDetails(1, 2)">
                <div class="two-content">
                  <div class="content_img_2">
                    <el-image
                      class="img_size"
                      :src="news_1"
                      fit="fill"
                    ></el-image>
                  </div>
                  <div class="content_text">
                    <div class="content_title textOut">
                      云南省2020年地址灾害合成孔径雷达干涉测量技术检测地址灾害合成孔径雷达干涉测量技术检测地址灾害合成孔径雷达干涉测量技术检测地址1111111111111111111
                    </div>
                    <div class="content_bridf text_more_Line">
                      云南省政府采购招标文件项目2113名称：伽师县******项目5261采购招标项目编号：****************号伽师县4102政府采购中心1653制二○一三年**月**日第一部分投标企业须知前附表第二部分投标云南省求向采购单位提供的货物。2.5服务:系指按合员单位会员证书（5）学仪器设备行业协会会员学仪器设备行业协会22222222222222222222222222222222222会5服
                    </div>
                    <div class="content_data ">
                      <div>2020-06-30</div>
                      <div><span>招标</span><span>昆明</span></div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="two-body">
                <div class="two-content">
                  <div class="content_img_2">
                    <el-image
                      class="img_size"
                      :src="news_1"
                      fit="fill"
                    ></el-image>
                  </div>
                  <div class="content_text">
                    <div class="content_title textOut">
                      云南省2020年地址灾害合成孔径雷达干涉测量技术检测地址灾害合成孔径雷达干涉测量技术检测地址灾害合成孔径雷达干涉测量技术检测地址1111111111111111111
                    </div>
                    <div class="content_bridf text_more_Line">
                      云南省政府采购招标文件项目2113名称：伽师县******项目5261采购招标项目编号：****************号伽师县4102政府采购中心1653制二○一三年**月**日第一部分投标企业须知前附表第二部分投标云南省求向采购单位提供的货物。2.5服务:系指按合员单位会员证书（5）学仪器设备行业协会会员学仪器设备行业协会22222222222222222222222222222222222会5服
                    </div>
                    <div class="content_data ">
                      <div>2020-06-30</div>
                      <div><span>招标</span><span>昆明</span></div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="two-body">
                <div class="two-content">
                  <div class="content_img_2">
                    <el-image
                      class="img_size"
                      :src="news_1"
                      fit="fill"
                    ></el-image>
                  </div>
                  <div class="content_text">
                    <div class="content_title textOut">
                      云南省2020年地址灾害合成孔径雷达干涉测量技术检测地址灾害合成孔径雷达干涉测量技术检测地址灾害合成孔径雷达干涉测量技术检测地址1111111111111111111
                    </div>
                    <div class="content_bridf text_more_Line">
                      云南省政府采购招标文件项目2113名称：伽师县******项目5261采购招标项目编号：****************号伽师县4102政府采购中心1653制二○一三年**月**日第一部分投标企业须知前附表第二部分投标云南省求向采购单位提供的货物。2.5服务:系指按合员单位会员证书（5）学仪器设备行业协会会员学仪器设备行业协会22222222222222222222222222222222222会5服
                    </div>
                    <div class="content_data ">
                      <div>2020-06-30</div>
                      <div><span>招标</span><span>昆明</span></div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="two-body">
                <div class="two-content">
                  <div class="content_img_2">
                    <el-image
                      class="img_size"
                      :src="news_1"
                      fit="fill"
                    ></el-image>
                  </div>
                  <div class="content_text">
                    <div class="content_title textOut">
                      云南省2020年地址灾害合成孔径雷达干涉测量技术检测地址灾害合成孔径雷达干涉测量技术检测地址灾害合成孔径雷达干涉测量技术检测地址1111111111111111111
                    </div>
                    <div class="content_bridf text_more_Line">
                      云南省政府采购招标文件项目2113名称：伽师县******项目5261采购招标项目编号：****************号伽师县4102政府采购中心1653制二○一三年**月**日第一部分投标企业须知前附表第二部分投标云南省求向采购单位提供的货物。2.5服务:系指按合员单位会员证书（5）学仪器设备行业协会会员学仪器设备行业协会22222222222222222222222222222222222会5服
                    </div>
                    <div class="content_data ">
                      <div>2020-06-30</div>
                      <div><span>招标</span><span>昆明</span></div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="two-body">
                <div class="two-content">
                  <div class="content_img_2">
                    <el-image
                      class="img_size"
                      :src="news_1"
                      fit="fill"
                    ></el-image>
                  </div>
                  <div class="content_text">
                    <div class="content_title textOut">
                      云南省2020年地址灾害合成孔径雷达干涉测量技术检测地址灾害合成孔径雷达干涉测量技术检测地址灾害合成孔径雷达干涉测量技术检测地址1111111111111111111
                    </div>
                    <div class="content_bridf text_more_Line">
                      云南省政府采购招标文件项目2113名称：伽师县******项目5261采购招标项目编号：****************号伽师县4102政府采购中心1653制二○一三年**月**日第一部分投标企业须知前附表第二部分投标云南省求向采购单位提供的货物。2.5服务:系指按合员单位会员证书（5）学仪器设备行业协会会员学仪器设备行业协会22222222222222222222222222222222222会5服
                    </div>
                    <div class="content_data ">
                      <div>2020-06-30</div>
                      <div><span>招标</span><span>昆明</span></div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="two-body">
                <div class="two-content">
                  <div class="content_img_2">
                    <el-image
                      class="img_size"
                      :src="news_1"
                      fit="fill"
                    ></el-image>
                  </div>
                  <div class="content_text">
                    <div class="content_title textOut">
                      云南省2020年地址灾害合成孔径雷达干涉测量技术检测地址灾害合成孔径雷达干涉测量技术检测地址灾害合成孔径雷达干涉测量技术检测地址1111111111111111111
                    </div>
                    <div class="content_bridf text_more_Line">
                      云南省政府采购招标文件项目2113名称：伽师县******项目5261采购招标项目编号：****************号伽师县4102政府采购中心1653制二○一三年**月**日第一部分投标企业须知前附表第二部分投标云南省求向采购单位提供的货物。2.5服务:系指按合员单位会员证书（5）学仪器设备行业协会会员学仪器设备行业协会22222222222222222222222222222222222会5服
                    </div>
                    <div class="content_data ">
                      <div>2020-06-30</div>
                      <div><span>招标</span><span>昆明</span></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="right-total">
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-size="6"
                layout="total,  prev,pager,  next, jumper"
                :total="addTotal"
              >
              </el-pagination>
            </div>
          </div>
          <div v-show="userStaus3"></div>
          <div class="right-adv" v-show="userStaus4">
            <div class="text_title">
              <p>投放广告</p>
              <p class="title-yin">Advertising</p>
              <div class="title-line"></div>
            </div>
            <div class="text_msg">
              <div class="msg_headline">
                <span> 投放位置</span>
                <el-select
                  class="headline-input"
                  v-model="Fromregion"
                  placeholder="请选择广告投放位置"
                >
                  <el-option
                    v-for="(item, index) in advPoslist"
                    :key="index"
                    :label="item.name"
                    :value="item.fee"
                  ></el-option>
                  <!-- <el-option label="供应商" value="shanghai"></el-option>
                  <el-option label="采购商" value="beijing"></el-option> -->
                </el-select>
              </div>
              <div class="msg_headline-2">
                <span> 投放时效</span>
                <el-input
                  class="headline-input"
                  placeholder="请输入天数"
                  v-model="headline"
                  clearable
                >
                </el-input>
              </div>
              <div class="msg_headline-2">
                <span> 广告费用</span>
                <el-input
                  class="headline-input"
                  placeholder="请输入联系电话"
                  v-model="headline"
                  clearable
                >
                </el-input>
              </div>
            </div>
            <div class="add_spragging"></div>
            <div class="text_edit">
              <div class="edit_title">
                <p>广告详情</p>
              </div>
              <!-- 富文本编辑器 -->
              <div class="edit_content ">
                <el-card style="height: 610px;">
                  <quill-editor
                    v-model="content"
                    class="quill-editor"
                    ref="myQuillEditor"
                    style="height: 500px;"
                    :options="editorOption"
                  >
                  </quill-editor>
                </el-card>
              </div>
            </div>
            <div class="add_spragging"></div>

            <div class="text_img">
              <div class="img_title">
                <p>广告图片</p>
              </div>

              <div class="img_upload">
                <el-upload
                  class="addleft"
                  ref="upload_img"
                  action=""
                  accept="image/jpeg,image/jpg,image/png"
                  list-type="picture-card"
                  :on-remove="handleRemove"
                  :on-exceed="handleExceedimg"
                  :limit="1"
                  :file-list="file_list"
                  :http-request="uploadSectionFile"
                >
                  <i class="el-icon-plus"></i>
                </el-upload>
                <el-dialog :visible.sync="dialogVisible" class="addstyle">
                  <img width="100%" :src="dialogImageUrl" alt="" />
                </el-dialog>
                <div slot="tip" class="el-upload__tip addtitile">
                  只能一张上传jpeg、jpg、png 格式的图片，图片大小在2M以内。
                </div>
              </div>
            </div>
            <div class="text_img">
              <div class="img_title">
                <p>详情图片</p>
              </div>

              <div class="img_upload">
                <el-upload
                  class="addleft"
                  ref="upload_img"
                  action=""
                  accept="image/jpeg,image/jpg,image/png"
                  list-type="picture-card"
                  :on-remove="handleRemove"
                  :on-exceed="handleExceedimg"
                  :limit="5"
                  :file-list="file_list"
                  :http-request="uploadSectionFile"
                >
                  <i class="el-icon-plus"></i>
                </el-upload>
                <el-dialog :visible.sync="dialogVisible" class="addstyle">
                  <img width="100%" :src="dialogImageUrl" alt="" />
                </el-dialog>
                <div slot="tip" class="el-upload__tip addtitile">
                  最多上传5张jpeg、jpg、png 格式的图片，图片大小在2M以内。
                </div>
              </div>
            </div>
            <div class="text_button">
              <div class="button_div">
                <el-button
                  class="addbutton"
                  type="danger"
                  @click="
                    TextSubmit(
                      headline,
                      leftchoose,
                      rightchoose,
                      synopsis,
                      coverImg,
                      detailContent
                    )
                  "
                  >确定并付款</el-button
                >
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-main>
    <!--********** 底部 -->
    <el-footer style="height:auto">
      <e-footer></e-footer>
    </el-footer>
  </el-container>
</template>
<script>
import eHeader from "@/components/public/Header.vue";
import eContentFrame from "@/components/public/ContentFrame.vue";
import eContentTag from "@/components/public/ContentTag.vue";
import eAdvertisingSpace from "@/components/public/AdvertisingSpace.vue";
import eFooter from "@/components/public/Footer.vue";

import { throttle } from "../../common/public.js";

export default {
  components: {
    eHeader,
    eContentFrame,
    eContentTag,
    eAdvertisingSpace,
    eFooter
  },
  data() {
    return {
      userceneter: require("../../assets/images/userceneter.png"),
      tabPosition: 1,
      items: [
        { id: 1, name: "我的发布", src: "el-icon-s-promotion" },
        { id: 2, name: "我的关注", src: "el-icon-star-on" },
        { id: 3, name: "我要发布", src: "el-icon-edit-outline" },
        { id: 4, name: "投放广告", src: "el-icon-picture" }
      ],
      addTotal: 0,
      userStaus1: false,
      userStaus2: true,
      userStaus3: false,
      userStaus4: false,
      Recommend: [],
      advPoslist: []
    };
  },
  computed: {},
  created() {
    //我的发布和我的关注接口
    this.Postmy_publish_follow("publish");
  },
  mounted() {},
  methods: {
    //左右两侧的联动状态
    showRight(id) {
      let _this = this;
      if (id == 1) {
        _this.userStaus1 = true;
        _this.userStaus2 = false;
        _this.userStaus3 = false;
        _this.userStaus4 = false;
        this.Postmy_publish_follow("publish");
      } else if (id == 2) {
        _this.userStaus1 = false;
        _this.userStaus2 = true;
        _this.userStaus3 = false;
        _this.userStaus4 = false;
        this.Postmy_publish_follow("follow");
      } else if (id == 3) {
        _this.userStaus1 = false;
        _this.userStaus2 = false;
        _this.userStaus3 = true;
        _this.userStaus4 = false;
        _this.$router.push("/MessageList");
      } else if (id == 4) {
        _this.userStaus1 = false;
        _this.userStaus2 = false;
        _this.userStaus3 = false;
        _this.userStaus4 = true;
      }
    },
    //我的发布和我的关注接口
    Postmy_publish_follow(name) {
      let _this = this;
      //多个代理可以的封装头是要与URL分开写的，不然系统可能识别不出来。
      //let Url = "/api/statis";
      //publish发布  follow关注 project项目订阅  bidding招标订阅
      let Params = {
        type: name
      };
      _this.$axios
        .post(_this.$basis + "/my_publish_follow", Params)
        .then(res => {
          let data = res.data.data;
          let resdata = res.data;
          console.log(res);
          _this.Recommend = [];
          switch (resdata.code) {
            case 0:
              for (let i = 0; i < data.length; i++) {
                _this.Recommend.push({
                  id: data[i].id,
                  content_title: data[i].title,
                  content_bridf: data[i].about,
                  content_date: data[i].create_time,
                  company_name: data[i].type,
                  content_position: data[i].position,
                  content_imgs: data[i].imgs
                });
              }
              break;
            case 1:
              console.log(resdata.msg);
              break;
          }
        });
    },

    //投放广告位置
    Postad_types() {
      let _this = this;
      _this.$axios.post(_this.$basis + "/ad_types").then(res => {
        let data = res.data.data;
        let resdata = res.data;
        console.log(res);
        _this.advPoslist = [];
        switch (resdata.code) {
          case 0:
            for (let i = 0; i < data.length; i++) {
              _this.advPoslist.push({
                id: data[i].id,
                name: data[i].name,
                fee: data[i].fee
              });
            }
            break;
          case 1:
            console.log(resdata.msg);
            break;
        }
      });
    }
  },
  beforeDestroy() {}
};
</script>
<style lang="scss" scoped>
.el-container {
  overflow: hidden;
}
.el-main {
  overflow: hidden;
  padding: 0;
}

$font-color: #fff;
$bg-color: rgba(46, 139, 87, 0.4);
$btn-color: #409eff;
$shadow-color: 3px 7px 50px -12px rgba(64, 158, 255, 0.4);
@mixin bubbleAnimation($send1, $send2) {
  animation: bubble $send1 linear infinite,
    direction $send2 ease-in-out infinite alternate;
}
.new-advlocation {
  display: flex;
  justify-content: center;
  width: 100%;
  min-width: 770px;
  height: 260px;
  .adv_container {
    height: 260px;
    .middle-net {
      height: 260px;
    }
  }
}
.mo_login {
  display: flex;
  justify-content: flex-start;
  max-width: 1200px;
  width: 100%;
  min-width: 1000px;
  margin: 0 auto;
  margin-top: 25px;
  margin-bottom: 20px;

  padding: 0 10px 20px 10px;
  height: auto;
  min-width: 945px;
  overflow: hidden;
  background: #f6f6f6;
  background-position: left top;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  &:before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    //background-image: linear-gradient(-225deg, #7de2fc 0%, #b9b6e5 100%);
    z-index: -1;
  }
  .addbreadcrumb {
    width: 100%;
    height: 40px;
    font-size: 14px;
    padding-top: 13px;
    padding-left: 22px;
  }
  .login-left {
    display: flex;
    justify-content: center;
    flex-direction: column;
    width: 230px;
    height: 510px;
    background: #fefefe;
    font-size: 24px;
    .left-img {
      width: 100%;
      height: 150px;
      padding: 30px 55px;
      .img-size {
        width: 120px;
        height: 120px;
      }
    }
    .left-name {
      width: 100%;
      height: 36px+10px+30px;
      color: #000;
      font-size: 25px;
      padding: 10px 83px 30px 83px;
    }
    .left-list {
      width: 100%;
      height: 270px;
      padding: 0 10px;
      .list-bottom {
        width: 100%;
        height: 100%;
        .addlist {
          display: flex;
          justify-content: flex-start;
          width: 100%;
          height: 76px;
          background: #ffffff;
          line-height: 56px;
          padding: 10px 0;

          text-align: center;
          float: left;
          cursor: pointer;
          .addwidth {
            width: 60px;
            height: 100%;
            font-size: 24px;
            line-height: 56px;
            padding-left: 10px;
            color: #333333;
          }
          .addbutton {
            width: 70px;
            .el-radio-button__inner {
              color: #333333;
              border-radius: 1px;
            }
          }
        }
        .addlist:hover {
          background: #ee181e;
          .addwidth {
            color: #fff;
          }
          .addbutton {
            .el-radio-button__inner {
              background: #ee181e;
            }
          }
        }

        .addlist /deep/ .el-radio-button__inner {
          border: none;
          border-radius: 0;
          font-size: 24px;
          color: #333333;
          box-shadow: none;
        }
        .addlist /deep/ .el-radio-button__inner:hover {
          border: none;
          color: #fff;
          background: #ee181e;
        }
        .add_color {
          background: #ee181e;
          .addwidth {
            color: #fff;
          }
          .addbutton {
            cursor: pointer;
            width: 70px;
            border: none;
            background: #ee181e;
            .el-radio-button__inner {
              background: #ee181e;
            }
          }
        }
        .add_color /deep/ .el-radio-button__inner {
          background: #ee181e;
        }
      }
    }
  }
  .login-middle {
    width: 15px;
    height: auto;
    min-height: 510px;
  }
  .login-right {
    width: 955px;
    height: auto;
    min-height: 610px;
    background: #ffffff;
    .right-publish {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: flex-start;
      flex-direction: column;
    }
    .right-attention {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: flex-start;
      flex-direction: column;
    }
    .right-adv {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: flex-start;
      flex-direction: column;
      .add_spragging {
        width: 100%;
        height: 40px;
        background: #f6f6f6;
      }
      .text_msg {
        width: 100%;
        height: 380px;
        background: #ffffff;
        border-radius: 6px;
        .msg_headline {
          display: flex;
          justify-content: flex-start;
          width: 100%;
          height: 65px;
          padding: 5px 25px 21px 25px;
          span {
            line-height: 44px;
            color: #252525;
            font-size: 16px;
          }
          .headline-input {
            width: 380px;
            height: 44px;
            border-radius: 4px;
            padding-left: 10px;
          }
        }
        .msg_headline-2 {
          display: flex;
          justify-content: flex-start;
          width: 100%;
          height: 60px;
          padding: 0px 25px 16px 25px;
          span {
            line-height: 44px;
            color: #252525;
            font-size: 16px;
          }
          .headline-input {
            width: 380px;
            height: 44px;
            border-radius: 4px;
            padding-left: 10px;
          }
        }
        .mes_choose {
          width: 100%;
          height: 40px;
          float: left;
          padding-left: 26px;

          .left_choose {
            width: 15%;
            height: 100%;
            float: left;
            margin-right: 40px;
          }
          .right_choose {
            width: 15%;
            height: 100%;
            float: left;
          }
        }
        .msg_synopsis {
          width: 100%;
          height: 66px;
          margin-top: 29px;
          padding: 28px 25px 22px 25px;
          .headline-input {
            width: 100%;
            height: 32px;
            // background: #F5F7FA;
            border-radius: 4px;
            //border:1px solid #dddddd;
          }
        }
      }
      .text_msg /deep/ .el-input--small .el-input__inner {
        height: 44px;
        line-height: 40px;
      }
      .text_img {
        width: 100%;
        height: 208px;
        background: #ffffff;
        border-radius: 6px;
        padding: 12px 0 0 16px;
        .img_title {
          width: 8%;
          height: 0px;
          padding: 2px 0 0 10px;
          text-align: left;
          background: #fbfbfb;
          font-size: 14px;
          font-weight: 400;
          color: #252525;
          margin-bottom: 22px;
          float: left;
        }
        .img_upload {
          width: 50%;
          height: auto;
          float: left;
          .addleft {
            float: left;
            // width: 128px;
            // height: 128px;
          }
          .addleft >>> .el-upload--picture-card {
            width: 128px;
            height: 128px;
          }

          .addleft >>> .el-upload-list--picture-card .el-upload-list__item {
            width: 128px;
            height: 128px;
          }
          .addstyle {
            width: 20px;
            height: 20px;
          }
        }
      }

      .text_edit {
        width: 100%;
        height: 600px;
        background: #ffffff;
        border-radius: 6px;
        overflow: hidden;
        .edit_title {
          width: 100%;
          height: 0px;
          padding: 12px 0 0 16px;
          text-align: left;
          background: #ffffff;
          font-size: 14px;
          font-weight: 400;
          color: #252525;
          margin-bottom: 22px;
        }
        .edit_content {
          width: 100%;
          height: auto;
          border-radius: 4px;
          //border-bottom: 1px solid #dddddd;
        }
      }
      .text_button {
        width: 100%;
        height: 51px;
        padding-left: 25px;
        background: #ffffff;
        .button_div {
          // margin-top: 10px;
          width: 16%;
          height: 46px;
          float: left;
          .addbutton {
            width: 100%;
            height: 100%;
            font-size: 18px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #f5f2eb;
          }
        }
      }
    }
    .text_title {
      width: 100%;
      height: 89px;
      padding: 12px 0 0 14px;
      text-align: left;
      background: #ffffff;
      font-size: 20px;
      font-weight: bold;
      color: #333333;
      .title-yin {
        padding-top: 12px;
        font-size: 12px;
      }
      .title-line {
        //width: 915px;
        width: 98%;
        height: 1px;
        padding-top: 11px;
        border-bottom: 1px solid #f6f6f6;
      }
    }
    .right-list {
      width: 100%;
      height: auto;
      padding: 0 15px;
      .two-body {
        display: flex;
        justify-content: flex-start;
        flex-direction: column;
        width: 100%;
        height: auto;
        background: #ffffff;
        .two-content {
          display: flex;
          justify-content: flex-start;
          width: 100%;
          height: auto;
          background: #ffffff;
          padding: 10px 0 0 0;
          .content_img_2 {
            width: 100px;
            min-width: 100px;
            height: 100px;
            .img_size {
              width: 100%;
              height: 100%;
            }
          }
          .content_text {
            width: calc(100% - 100px);
            padding: 0 0 1px 10px;
            text-align: left;
            font-size: 16px;
            .content_title {
              width: 100%;
              height: 32px;
              color: #333333;
              font-size: 16px;
              font-weight: bold;
            }
            .content_bridf {
              width: 100%;
              height: auto;
              color: #333333;
              font-size: 14px;
              text-align: left;
            }
            .content_data {
              display: flex;
              justify-content: space-between;
              width: 100%;
              height: auto;
              padding-top: 15px;
              color: #333333;
              font-size: 12px;
              text-align: left;
              span {
                padding-left: 10px;
              }
            }
          }
        }
      }
    }
    .right-total {
      width: 100%;
      height: 60px;

      display: flex;
      justify-content: flex-start;
      align-items: center;
      padding: 30px 38% 20px 30%;
    }
  }
}

.location-right {
  margin-left: 25%;
  width: 50%;
  float: left;
  text-align: center;
  color: #ffffff;
  font-size: 12px;
}
.el-form-item {
  margin-right: 25px;
  margin-left: -5px;
}

.addcolor {
  color: #558ffb;
}
.addcolor:hover {
  color: #558ffb;
}
.addpadding {
  padding: 0;
}
.DAEBFF {
  background: #daebff;
}
.F5F5FD {
  background: #f5f5fd;
}
.F0FFFE {
  background: #f0fffe;
}
</style>
